import styled from 'styled-components';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import { Table, Space, Button } from "antd";
import { SharedObjectVersion, sharingGetSharedObjectVersions } from '../../services';

export interface SharedObjectVersionTableProps {
    style?: CSSProperties;
    identifier: string;
}


export const SharedObjectVersionTable: React.FC<SharedObjectVersionTableProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [versions, setVersions] = useState<Array<SharedObjectVersion>>([]);

    const [page, setPage] = useState<number>(1);

    const [pageSize, setPageSize] = useState<number>(10);

    const [total, setTotal] = useState<number>(0);

    const columns = [
        {
            title: '标识',
            dataIndex: 'identifier',
            key: 'identifier',
            width: '240px',
            ellipsis: true,
        },
        {
            title: '版本',
            dataIndex: 'version',
            key: 'version',
            width: '120px',
            ellipsis: true,
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            width: '220px',
            ellipsis: true,
        },
        {
            title: '操作',
            dataIndex: '操作',
            key: '操作',
            render: (_, record) => {
                return (
                    <Space size="middle">
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {

                            }}
                        >删除</Button>
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {

                            }}
                        >下载</Button>
                        <Button
                            type={'link'}
                            size={'small'}
                            onClick={async () => {

                            }}
                        >导入</Button>
                    </Space>
                );
            }
        },
    ];

    const request = async (identifier: string, page: number, pageSize: number) => {
        setLoading(true);
        const { total, data } = await sharingGetSharedObjectVersions(identifier, page, pageSize);
        setVersions(data);
        setTotal(total);
        setLoading(false);
    };

    useEffect(() => {
        request(props.identifier, page, pageSize);
    }, [props.identifier, page, pageSize]);

    return (
        <Container>
            <Table
                bordered
                loading={loading}
                rowKey={'id'}
                pagination={{
                    showSizeChanger: true,
                    total: total,
                    current: page,
                    pageSize: pageSize,
                    onChange: (page, pageSize) => {
                        setPage(page);
                    },
                    onShowSizeChange: (current, size) => {
                        setPageSize(size);
                    }
                }}
                dataSource={versions} columns={columns} />
        </Container>
    );
}


const Container = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
    gap: 10px;
`;